<!--
- Author:   .
- Date:    2017/3/4.
- File:    底部tab.
-->
<template>
  <div class="footer-tab" v-show="show">
    <nav ref="footer-tab-nav" class="footer-tab-nav">
      <ul v-show="memberInfo.is_brush_man == '1'">
        <li :class="{ 'on': item.name == $route.name || item.name == current}"  style="width: 25%" v-for="item in list">
          <a href="javascript:void(0)" @click="go(item.name)">
            <i class="iconfont" :class="[ item.icon ]" v-show="item.name != $route.name && item.name != current"></i>
            <i class="iconfont" :class="[ item.icon2 ]" v-show="item.name == $route.name || item.name == current"></i>
            <p>{{item.title}}</p>
          </a>
        </li>
      </ul>
      <ul v-show="memberInfo.is_brush_man == '0'">
        <li :class="{ 'on': item.name == $route.name || item.name == current}" style="width: 25%" v-for="item in list2">
          <a href="javascript:void(0)" @click="go(item.name)">
            <i class="iconfont" :class="[ item.icon ]" v-show="item.name != $route.name && item.name != current"></i>
            <i class="iconfont" :class="[ item.icon2 ]" v-show="item.name == $route.name || item.name == current"></i>
            <p>{{item.title}}</p>
          </a>
          <!--<a href="javascript:void(0)" @click="goDetail(item.name)" v-show="item.name == 'goods-detail'">-->
            <!--<i class="iconfont" :class="[ item.icon ]" v-show="item.name != $route.name && item.name != current"></i>-->
            <!--<i class="iconfont" :class="[ item.icon2 ]" v-show="item.name == $route.name || item.name == current"></i>-->
            <!--<p>{{item.title}}</p>-->
          <!--</a>-->
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: ['memberInfo']})
    ],
    data () {
      return {
        inter: null,
        list: [
          {
            title: '首页',
            name: 'home',
            icon: 'icon-home',
            icon2: 'icon-homeon'
          },
          {
            title: '提现',
            name: 'account-withdraw',
            icon: 'icon-pitch2',
            icon2: 'icon-pitchon2'
          },
          // {
          //   title: '资讯',
          //   name: 'news-list',
          //   icon: 'icon-wenzhang',
          //   icon2: 'icon-wenzhangon'
          // },
          {
            title: '购物车',
            name: 'cart-list',
            icon: 'icon-shoppingcart',
            icon2: 'icon-shoppingcarton'
          },
          {
            title: '我的',
            name: 'my',
            icon: 'icon-my',
            icon2: 'icon-myon'
          }
        ],
        list2: [
          {
            title: '首页',
            name: 'home',
            icon: 'icon-home',
            icon2: 'icon-homeon'
          },
          {
            title: '分类',
            name: 'goods-classify',
            icon: 'icon-classification',
            icon2: 'icon-classificationon'
          },
          {
            title: '购物车',
            name: 'cart-list',
            icon: 'icon-shoppingcart',
            icon2: 'icon-shoppingcarton'
          },
          {
            title: '我的',
            name: 'my',
            icon: 'icon-my',
            icon2: 'icon-myon'
          }
        ]
      }
    },
    props: {
      current: {
        type: String,
        default: function () {
          return ''
        }
      },
      show: {
        type: Boolean,
        default: function () {
          return true
        }
      }
    },
    beforeDestroy() {
      clearInterval(this.inter)
    },
    created() {
    },
    mounted() {
//      console.log('api', window.api.safeArea.bottom)
//      if (this.$utils.getDeviceType() == 'APICloud') {
//        this.$refs['footer-tab-nav'].style.paddingBottom = window.api.safeArea.bottom + 'px'
//      }
      if (this.$utils.isIphoneX()) {
        this.$refs['footer-tab-nav'].style.paddingBottom = '34px'
      }
//      this.$refs['footer-tab-nav'].style.height = this.$refs['footer-tab-nav'].style.height + 34 + 'px'
    },
    methods: {
      go(routerName) {
        this.$router.push({name: routerName})
      }
    }
  }
</script>

<style lang="less">
  .footer-tab {
    &-nav {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      /*height: 49px;*/
      padding-top: 0.25rem;
      border-top: #d0cfcd solid 1px;
      background: #f8f8f8;
      z-index: 10;
      .icon-wenzhang, .icon-wenzhangon {
        font-size: 25px;
        line-height: 24px;
      }
      li {
        position: relative;
        float: left;
        width: 33.3%;
        text-align: center;
        color: #898989;
        .icon-shipin1, .icon-shipin3 {
          font-size: 22px;
          line-height: 23px;
        }
        i {
          display: block;
          font-size: 20px;
        }
        p {
          font-size: 12px;
          padding-top: 0.05rem;
        }
        a {
          color: inherit;
        }
        .num {
          position: absolute;
          left: 2.125rem;
          top: 0.15rem;
          display: block;
          width: 0.65rem;
          height: 0.65rem;
          line-height: 0.65rem;
          font-size: 0.5rem;
          color: #fff;
          text-align: center;
          background: #e60012;
          border-radius: 50%;
        }
      }
      li.on {
        color: #f83166;
      }
    }
  }
</style>
